<template>
  <div style="margin-top: 50px">
    <div class="top">
      <div style="text-align: center">
        <div class="icon_div"><img src="@/assets/image/1_blue.png"></div>
        <div class="icon_div">
          <div class="xian" />
        </div>
        <div class="icon_div"><img src="@/assets/image/2_grey.png"></div>
        <div class="icon_div">
          <div class="xian" />
        </div>
        <div class="icon_div"><img src="@/assets/image/3_grey.png"></div>
        <div class="icon_div">
          <div class="xian" />
        </div>
        <div class="icon_div"><img src="@/assets/image/4_grey.png"></div>
      </div>
      <div style="text-align: center">
        <div class="icon_div" style="width: 195px">填写账号及验证</div>
        <div class="icon_div" style="width: 192px">
          <span style="color: gray">二次验证</span>
        </div>
        <div class="icon_div" style="width: 191px">
          <span style="color: gray">设置新密码</span>
        </div>
        <div class="icon_div" style="width: 195px">
          <span style="color: gray">完成</span>
        </div>
      </div>
    </div>
    <div class="container">
      <div style="background-color: #ecf1f8; width: 580px; margin-left: 8px">
        <span style="
            color: rgb(98 101 105);
            width: 580px;
            height: 30px;
            line-height: 2;
          ">请输入需要重置密码的用户账号和手机号，获取手机验证码后填写确认进入下一步</span>
      </div>
      <el-form ref="ruleForm" class="demo-ruleForm">
        <el-form-item label="账　号:">
          <el-input v-model="userName" class="input_text" />
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input v-model="Phone" class="input_text" />
        </el-form-item>
        <el-form-item label="验证码:">
          <el-input v-model="Verificationcode" class="input_text" style="width: 168px" />
          <el-button v-show="show" type="primary" style="margin-left: 20px" @click="GetAutoCode">获取验证码</el-button>
          <el-button v-show="!show" disabled type="info" style="margin-left: 20px; width: 112px" @click="GetAutoCode">
            {{ count }} s</el-button>
        </el-form-item>
      </el-form>
      <div class="btn_div">
        <el-button type="primary" style="width: 300px" @click="Verification">下一步</el-button>
      </div>
    </div>
    <div>
      <hr style="width: 700px">
    </div>
    <div style="text-align: center">
      <span style="color: rgb(98 101 105)">为避免手机遗失导致重要信息泄露，密码重置功能需要您本人和部门同事双重短信验证，敬请知悉。</span>
    </div>
  </div>
</template>

<script>
  import Global from '@/utils/Global.js'
  export default {
    data() {
      return {
        userName: '',
        Phone: '',
        Verificationcode: '',
        AutoCode: '',
        parentID: '',
        UserID: '',
        show: true,
        count: '',
        timer: null
      }
    },
    created() {},
    methods: {
      // 获取验证码
      GetAutoCode(form) {
        const _that = this
        if (_that.userName == '') {
          _that.$message.error('请输入账号！')
          return
        }
        if (_that.Phone == '') {
          _that.$message.error('请输入手机号！')
          return
        }
        const TIME_COUNT = 60
        if (!_that.timer) {
          _that.count = TIME_COUNT
          _that.show = false
          _that.timer = setInterval(() => {
            if (_that.count > 0 && _that.count <= TIME_COUNT) {
              _that.count--
            } else {
              _that.show = true
              clearInterval(_that.timer)
              _that.timer = null
            }
          }, 1000)
        }
        console.log('获取验证码')
      },

      // 验证账号 手机号 和验证码
      Verification() {
        const _that = this
        if (_that.userName == '') {
          _that.$message.error('请输入账号！')
          return
        }
        if (_that.Phone == '') {
          _that.$message.error('请输入手机号！')
          return
        }
        if (_that.Verificationcode == '') {
          _that.$message.error('请输入验证码！')
          return
        }
        console.log('验证验证账号 手机号 和验证码')
        _that.$router.push({
          path: '/revalidation'
        })
      }
    }
  }

</script>
<style scoped>
  .top {
    width: 100%;
    height: 70px;
  }

  .container {
    margin: 0 auto;
    width: 600px;
    height: 330px;
  }

  .demo-ruleForm {
    margin-left: 110px;
    margin-top: 40px;
  }

  .input_text {
    width: 300px;
  }

  .btn_div {
    text-align: center;
  }

  /deep/label {
    font-weight: 500;
  }

  .icon_div {
    display: inline-block;
  }

  .xian {
    width: 160px;
    border: 1px solid #dadada;
    background-color: #dadada;
    margin-bottom: 15px;
  }

</style>
